<template>
    <div class="recommend">
        <HotTitle>推荐好课</HotTitle>
        <div class="recommend-content">
            <div class="left">
                <img src="@/assets/images/4.png" alt="">
            </div>
            <ul>
                <List/>
                <List/>
                <List/>
                <List/>
                <List/>
                <List/>
            </ul>
        </div>
    </div>
</template>

<script setup>
import HotTitle from '@/components/home/HotTitle.vue'
import List from '@/components/home/List.vue'
</script>

<style lang="scss" scoped>
.recommend {
    width: 1140px;
    margin: 0 auto;

    .recommend-content {
        display: flex;

        .left {
            width: 550px;
            height: 570px;
            margin: 20px 15px 0 0;
            // background-color: aqua;

            img {
                width: 100%;
                height: 100%;
            }
        }

        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            
        }

    }
}
</style>